<template>
    <div class="amap-box">
        <div id="amap_container" class="map" tabindex="0"></div>
        <div class="resite" v-on:click="resite">
            <img class="resite-pic" src="@/assets/img/performance/homePage/site.png" />
        </div>
    </div>
</template>
<script>
import {city} from '../constant.js'
import { AMAPKEY, asyncLoadAMAP, Getsite } from '@/utils/amap.js'
import { Copy } from '@/utils/object'
let vm
let map
let PositionPicker

let loadMap = async (site, center) => {
    if(!PositionPicker){
        AMapUI.loadUI(['misc/PositionPicker'], function(_PositionPicker) {
            PositionPicker = _PositionPicker
            loadMap(site, center)
        })
        return
    }
    let params = {
        zoom: 18,
    }
    if(center){
        params.center = center
    }
    if(site && map){
        console.log('选择城市后的定位')
        console.log(center)
        center || map.panTo(city.find(e => e.name == site).site)
        return
    }else if(!center){
        let  _center
        // 编辑
        // if(vm.position[0]){
        //     _center = Copy(vm.position)
        // }else{
            // 添加
            if(location.href.includes('http://localhost')){
                _center = [113.948373,22.545368]
            }else{
                try {
                    _center = await Getsite()                  
                } catch (error) {
                    console.log(error)
                    vm.$toast(error)
                }
            }
        // }

        let set = () => {
            try {
                params.center = _center
                map && map.panTo(_center)
            } catch (error) {
                console.log(error)
                vm.$toast('定位失败')        
            }
        }
        set()
        window.setTimeout(set, 0)
        window.setTimeout(set, 50)
        window.setTimeout(set, 500)
    }
    
    map = new AMap.Map('amap_container', params)
    var positionPicker = new PositionPicker({
        mode:'dragMap',//设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
        map: map,
        iconStyle: { //自定义外观
            url: 'https://webapi.amap.com/ui/1.0/assets/position-picker2.png',
            ancher: [24, 40],
            size: [48, 48]
        }
    })
    // 成功获取信息
    positionPicker.on('success', function(positionResult) {
        // console.log(vm)
        vm.cb(positionResult)
        // console.log(position, address, nearestJunction, nearestRoad, nearestPOI)
    }) 
    // 海上或海外无法获得地址信息
    positionPicker.on('fail', function(positionResult) {
        console.log('fail')
    })
    // 开启定位
    positionPicker.start()
    map.getCity(e => {
        // console.log(e)
        vm.getCityCallback && vm.getCityCallback(e)
    })
}
export default {
    props: ['site', 'cb', 'position', 'getCityCallback', 'setCenterSite'],
    watch: {
        site(val){
            this.site = val
            loadMap(val)
        },
        setCenterSite(val){
            if(val){
                loadMap(false, val)
            }
        },
        cb(v){this.cb = v},
        getCityCallback(v){this.getCityCallback = v},
        position(v){
            return v
        }
    },
    data(){
        return{
            key: AMAPKEY,
        }
    },
    created(){
        vm = this
        window.map_callback = () => {
            console.log('map_callback 134')
            initAMapUI()
            //加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
            AMapUI.loadUI(['misc/PositionPicker'], function(_PositionPicker) {
                PositionPicker = _PositionPicker
                if(vm.position[0]){
                    loadMap(false, vm.position)
                }else{
                    loadMap()
                }
            })
        }
        console.log('加载中')
        asyncLoadAMAP() 
        setTimeout(() => {
            console.log('map', map)
            if(!map){
                loadMap()
            }
        }, 5e3)
    },
    methods: {
        resite(){
            loadMap()
        },
    },
    destroyed(){
        map.destroy()
    }
}
</script>

<style lang="scss" scoped>
.amap-box{
    height: calc(100vh - .9rem);
    // background-color: #000;
    overflow: hidden;
    #amap_container{
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: calc(140vh);
    }
    .resite{
        position: fixed;
        bottom: 1.88rem;
        left: .12rem;
        z-index: 3;
        .resite-pic{
            width: 1.04rem;
            height: 1.04rem;
        }
    }
}
</style>
